<script setup>
import {ref, onMounted,computed} from "vue";
import {useRouter} from "vue-router"; // 修正为 useRouter
import axios from "axios";
import tijianheader from "../components/header.vue";

const phoneNumber = ref("");
const name = ref("");
const gender = ref("");
const examType = ref("");
const examDate = ref("");
const isArchived = ref(false); // 假设 isArchived 字段存在
const orderlist = ref([]);
const router = useRouter(); // 创建路由实例

//分页
const pagesize = 10; // 每页多少数据
const currentPage = ref(1); // 默认当前页为第一页
const handleSizeChange = (size) => {
    this.pagesize = size;
    console.log(this.pagesize); //每页下拉显示数据
};
const handleCurrentChange = (currentPage) => {
    this.currentPage = currentPage;
    console.log(this.currentPage); //点击第几页
};

onMounted(async () => {
    try {
        const response = await axios.get("/api/order/orderAll");
        orderlist.value = response.data.data || []; // 防止赋值为 undefined
        console.log(orderlist.value); //

    } catch (error) {
        console.error("获取订单列表失败:", error); // 错误处理
    }
});

const editReport = (id) => {
    router.push({
        path: "/appoiontment",
        query: {orderid: id},
    });
};

const reset = () => {
    phoneNumber.value = "";
    name.value = "";
    gender.value = "";
    examType.value = "";
    examDate.value = ""; // examDate 未声明，保持可用性
    isArchived.value = false; // isArchived 未声明，保持可用性
};
const paginatedOrderList = computed(() => {
    const start = (currentPage.value - 1) * pagesize;
    return orderlist.value.slice(start, start + pagesize);
});

</script>

<template>
    <div class="medical-exam-system">
        <!-- <header class="header">
      <h1 class="title">Neusoft 体检报告管理系统</h1>
      <p class="doctor-name">医生: 孙思邈</p>
    </header> -->
        <tijianheader></tijianheader>
        <div class="container">
            <aside class="sidebar">
                <h2 class="sidebar-title">体检客户查询</h2>
                <form @submit.prevent="search" class="search-form">
                    <div class="form-group">
                        <label for="phoneNumber">手机号码</label>
                        <input v-model="phoneNumber" type="text" id="phoneNumber" />
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input v-model="name" type="text" id="name" />
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input v-model="gender" type="radio" name="gender" value="男" />
                                <span>男</span>
                            </label>
                            <label class="radio-label">
                                <input v-model="gender" type="radio" name="gender" value="女" />
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="examType">套餐类型</label>
                        <select v-model="examType" id="examType">
                            <option value="">选择类型</option>
                            <option value="胃肠检查">胃肠检查</option>
                            <option value="肝病检查">肝病检查</option>
                            <option value="基础套餐">基础套餐</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="examDate">体检日期</label>
                        <input v-model="examDate" type="date" id="examDate" />
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input v-model="isArchived" type="checkbox" />
                            <span>已归档</span>
                        </label>
                    </div>
                    <div class="button-group">
                        <button type="submit" class="btn btn-primary">查询</button>
                        <button type="button" @click="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </aside>
            <main class="main-content">
                <!-- <div class="table-container">
                    <table class="records-table">
                        <thead>
                            <tr>
                                <th>预约编号</th>
                                <th>手机号码</th>
                                <th>真实姓名</th>
                                <th>性别</th>
                                <th>体检套餐类型</th>
                                <th>体检医院</th>
                                <th>体检日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in orderlist" :key="orderlist.id">
                                <td>{{ order.orderid }}</td>
                                <td>{{ order.userid }}</td>
                                <td>{{ order.user.realname }}</td>
                                <td>{{ order.sex == 1 ? "男" : "女" }}</td>
                                <td>{{ order.setmeal.name }}</td>
                                <td>{{ order.hospital.name }}</td>
                                <td>{{ order.orderdate }}</td>
                                <td>
                                    <p @click="editReport(order.orderid)" class="edit-link">编辑体检报告</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> -->

                <el-table style="width: 100%; height: 100%; margin-top: 20px;" :data="paginatedOrderList">
                    <el-table-column label="预约编号" prop="orderid" width="180"></el-table-column>
                    <el-table-column label="真实姓名" prop="user.realname" width="150"></el-table-column>
                    <el-table-column label="性别" prop="user.sex" width="80"></el-table-column>
                    <el-table-column label="体检套餐类型" prop="setmeal.name" width="200"></el-table-column>
                    <el-table-column label="体检医院" prop="hospital.name" width="180"></el-table-column>
                    <el-table-column label="体检日期" prop="orderdate" width="180"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <p @click="editReport(row.orderid)" class="edit-link">编辑体检报告</p>
                    </el-table-column>
                </el-table>

                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="orderlist.length"
                >
                </el-pagination>
            </main>
        </div>
    </div>
</template>

<style scoped>
.medical-exam-system {
    min-height: 100vh;
    background-color: #f3f4f6;
}

.header {
    background-color: #b3c0d0;
    color: white;
    padding: 1rem;
}

.title {
    font-size: 1.5rem;
    font-weight: bold;
}

.doctor-name {
    font-size: 0.875rem;
}

.container {
    display: flex;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 1rem;
}

.sidebar {
    width: 300px;
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    margin-right: 1rem;
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
}

.radio-group,
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.button-group {
    display: flex;
    gap: 0.5rem;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
}

.btn-secondary {
    background-color: #9ca3af;
    color: white;
}

.main-content {
    flex: 1;
}

.table-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.records-table {
    width: 100%;
    border-collapse: collapse;
}

.records-table th,
.records-table td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.records-table th {
    background-color: #f9fafb;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #6b7280;
}

.records-table td {
    border-top: 1px solid #e5e7eb;
}

.edit-link {
    color: #2563eb;
    text-decoration: none;
}

.edit-link:hover {
    text-decoration: underline;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-top: 1px solid #e5e7eb;
}

.pagination-info {
    font-size: 0.875rem;
    color: #6b7280;
}

.pagination-nav {
    display: flex;
    gap: 0.25rem;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    color: #4b5563;
    text-decoration: none;
}

.pagination-link.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
</style>
